<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body id="back">
<style>
#back{
    background-image: url("../images/R-C (1).gif");
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: grid; /* 设置为Grid容器 */
    place-items: center; /* 居中子元素 */
}
#login{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 220px;
    width: 400px; /* 设置一个宽度 */
    padding: 20px; /* 增加一些内边距 */
    background: #c6e2ff;
    border-radius: 4px; /* 可选，给表单添加圆角 */
}
.small-select{
    width: 110px; /* 设置你想要的宽度 */
    height: 30px; /* 设置你想要的高度 */
}


</style>

<div id="app">
    <div id="login">
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="账号">
                <el-input v-model="formLabelAlign.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="formLabelAlign.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="danger" @click="reset">重置</el-button>
<!--                选择器-->
                <template>
                    <el-select v-model="value" placeholder="请选择" class="small-select">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <el-link type="primary" href="/login/register.html">注册？</el-link>

            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    new Vue({
        el: '#app', // 挂载点
        data() {
            return {

                labelPosition: 'left',
                formLabelAlign: {
                    username: '',
                    password: ''
                },
                options: [{
                    value: 'MANGER',
                    label: '管理员'
                }, {
                    value: 'WORKER',
                    label: '工作人员'
                }, {
                    value: 'USER',
                    label: '用户'
                }],
                value: 'USER'
            };
        },

        methods: {
            login(){
                var _this=this
                axios({
                    method:'post',
                    url:'/login',
                    headers:{
                        'Content-Type': 'application/json', // 设置请求头
                    },
                    data:{
                        username:_this.formLabelAlign.username,
                        password:_this.formLabelAlign.password,
                        identify: _this.value
                    }
                })
                    .then(function (response){
                        if(response.data.code==203){
                            alert("登录成功")
                            _this.formLabelAlign.password=''
                            // _this.skip()
                            var username = _this.formLabelAlign.username;
                            localStorage.setItem('username', username);
                            window.location.href = '../pages/shop.html';
                        }else if(response.data.code==201){
                            alert("登录成功")
                            window.location.href="../pages/manger.html"
                            _this.formLabelAlign.password=''
                        }else if(response.data.code==202){
                            alert("登录成功")
                            window.location.href="../pages/worker.html"
                        }else {
                            console.log(response);
                            console.log(response.data.code)
                            alert("登录失败")
                        }
                    })
            },
            reset(){
                var _this=this
                _this.formLabelAlign.username=''
                _this.formLabelAlign.password=''
            },
        },


    });
</script>
</body>
</html>